import React, { memo, Suspense } from "react"
import type { ReactNode } from "react"
import { Outlet, NavLink } from "react-router-dom"
import Loading from "@/components/Loading"
// 引入二级菜单
import { dicoverMenu } from "@/requset/local-data"
// 引入样式
import "./index.less"
// 定义props接口
interface Iprops {
	children?: ReactNode
}

// React.FC为函数式组件ts类型，<Iprops>为传入的props泛型
const Discover: React.FC<Iprops> = () => {
	return (
		<div>
			<div className="navContainer">
				<div className="nav wrap-v1">
					{dicoverMenu.map((item) => {
						return (
							<div key={item.link} className="item">
								<NavLink to={item.link}>{item.title}</NavLink>
							</div>
						)
					})}
				</div>
			</div>
			<Suspense fallback={<Loading />}>
				<Outlet />
			</Suspense>
		</div>
	)
}

export default memo(Discover)
